<template>
	<div class="container">
		<button class="hide-btn" open-type="getUserInfo">授权访问</button>
		<div class="userinfo" @click="getUserInfo">
		  <img class="user-avatar" :src="userInfo.avatarUrl"/>
	      <p class="user-nickname">{{ userInfo.nickName }}</p>
	    </div>
	    <YearProgress></YearProgress>
	    <button v-if="showAddBtn" class="btn" @click="scanbook">添加图书</button>
	</div>
</template>
<script>
    import { login, getUserInfo, showSuccess,post,showModal} from '@/utils/wechat'
    import wx from '@/utils/wx'
    import YearProgress from '@/components/YearProgress'
export default {
  data () {
	    return {
	      userInfo: {
	        nickName: '点击登陆',
	        avatarUrl: '/static/img/unlogin.jpg'
	      },
	      showAddBtn: false,
	    }
	  },
	 methods: {
	    async getUserInfo () {
	      const data = await getUserInfo()
	      this.showAddBtn = true
	      showSuccess('登陆成功')
	      this.userInfo = data.userInfo
	      console.log(userInfo)
	    },
	    scanbook () {
	    	wx.scanCode({
            success: (res) => {
            	if(res.result){
            		this.addBook(res.result)
            	}
            }
          })
	    },
	    async addBook(isbn){
	    	console.log(isbn)
	    	const res = await post ('/weapp/addbook',{
	    		isbn,
	    		nickname:this.userInfo.nickName
	    	})
	    	showModal('添加成功',`${res.data.data.title}添加成功`)
	    }
	  },
	  mounted () {
	    login().then(res => {
	      console.log('登陆成功', res)
	    })
	  },
	  components: {
	  	YearProgress
	  }
}
</script>
<style lang="scss">
	.container{
		padding: 0 30rpx;
		.hide-btn{
			display:none;
		}
		.userinfo{
			margin-top:100rpx;
			text-align:center;
			img{
				width: 150rpx;
				height: 150rpx;
				margin:20rpx;
				border-radius:50%;
			}
			p{
				margin:30rpx;
			}
		}
	}
</style>